<template>
    <div class="zcb-page">
        <div class="zcb-content">
            <slot></slot>
        </div>
        <div class="bottom-bar">
            <div class="bottom-bar-item" v-for="(item, index) in bottomBarList" :key="index" @click="setPage(index)">
                <image :src="currentPage == index ? item.activeSrc : item.src" style="width:40px;height:40px;"></image>
                <text :style="{'color': currentPage == index ? themeColor : '#999'}" class="bottom-item" :class="{active: currentPage == index}">{{item.title}}</text>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	props: {
		themeColor: {
			type: String,
			default: "#E70D0D"
		},
		bottomBarList: {
			type: Array,
			default: []
		},

		getCurrentIndexCb: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			currentPage: 0
		}
	},
	methods: {
		setPage(page) {
			this.currentPage = page;
			this.getCurrentIndexCb(page);
		}
	},
	mounted() {
		const Stack = new BroadcastChannel("jumptouter");
		Stack.onmessage =(event)=>{
			if (event.data === "toTrends") {
				this.setPage(1);
			} 
		};
	}
};
</script>

<style scoped>
.zcb-page {
  position: relative;
  width: 750px;
}
.zcb-content {
  flex: 1;
}
.bottom-bar {
  height: 100px;
  flex-direction: row;
  position: fixed;
  bottom: 0;
	left:0;
  width: 750px;
  background-color: #fff;
  border-top-width: 1px;
  border-top-color: #ededed;
  border-top-style: solid;
	

}
.bottom-bar-item {
	height:98px;
  justify-content: center;
  width: 187.5px;
  align-items: center;
	
}
.bottom-item {
  font-size: 20px;
	margin-top:2px;
}
</style>